<template>
  <div class="AddPaymentMethod" style="display: flex; flex-direction: column;align-items: center; width: 100%;height: 100%">
    <div class="top w-full">
      <order-nav class="mb-20 bg-white" :title="$t('全部收款方式')" />
      <div class="h-72 pl-32 pr-32 pb-24">
        <buy-input v-model="select" @input="inputValue" :placeholder="$t('请输入收款方式')" />
      </div>
    </div>
    <div style="width: 100%;flex: 1; overflow: auto">
      <van-index-bar :sticky-offset-top="100" :sticky="false" :index-list="indexList">
        <div v-for="(item, index) in list" :key="index">
          <van-index-anchor class="pt-10 pb-10 tabBackground" :index="item.title" />
          <div class="payment_method_cell flex items-center ml-50 pt-8 pb-8" v-for="(label, labelIndex) in item.labels"
            :key="label.id" @click="addBankCar(label)">
            <div class="w-10 h-38 mr-22 rounded-2xl" :style="{ 'background': color(labelIndex) }"></div>
            <van-cell :title="label.name" />
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import otcApi from "@/API/otc";
import { pinyin } from 'pinyin-pro';
import {
  getRandom
} from "@/utils/utis";
import { IndexBar, IndexAnchor, Cell, Sticky, Toast } from 'vant';
import OrderNav from "@/components/order-nav/OrderNav";
import BuyInput from "@/page/placeAnOrder/components/buyInput/BuyInput";

export default {
  name: "AddPaymentMethod",
  data() {
    return {
      select: '',
      indexList: [],
      list: [],
      allList: []
    }
  },
  created() {
    this.getPaymentMethodConfig();
  },
  methods: {
    //搜索
    inputValue() {
      if(this.select) {
        this.list = this.list.filter((item)=>{
           return item.labels[0].name.indexOf(this.select) != -1
        })
      } else {
        this.list = this.allList
      }
    },
    addBankCar(data) {
      this.$router.push({
        name: 'bankCarDetail',
        query: {
          type: "CN",
          id: data.id,
          configType: 'add',
        }
      })
    },
    async getPaymentMethodConfig() {
      const titleArr = []; // 右侧索引
      Toast.loading();
      const res = await otcApi.ctcPaymentMethodConfig({ language: this.$i18n.locale })
      Toast.clear()

      // format数据
      Object.keys(res.data).forEach(key => {
        // 换成拼音
        const title = pinyin(res.data[key], {
          pattern: 'first',
          type: 'array'
        })[0].toLocaleUpperCase()

        titleArr.push(title)

        // 查找是否有相同
        const index = this.list.findIndex(item => item.title === title)

        if (index === -1) {
          this.list.push({
            title,
            labels: [{
              id: key,
              name: res.data[key],
            }]
          })
        } else {
          this.list[index].labels.push({
            id: key,
            name: res.data[key],
          })
        }

      })
      console.log(this.list)
      this.allList = this.list
      // 数组去重
      this.indexList = [...new Set(titleArr)]
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    color(index) {
      return `rgb(${this.getRandom(0, 250) + index},${this.getRandom(0, 250) + index},${this.getRandom(0, 250) + index})`
    }
  },
  components: {
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Cell.name]: Cell,
    OrderNav,
    BuyInput,
  }
}
</script>

<style lang="scss" scoped>
.top {
  position: relative;
  top: 0;
  left: 0;
}

.payment_method_cell {
  position: relative;

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    @include themify() {
      border-bottom: 1px solid themed("border_color");
    }
  }
}
.AddPaymentMethod{


::v-deep {
  .van-index-anchor {
    font-size: 36px;
    font-weight: 500;
    color: #868D9A;
  }

  .van-cell__title {
    font-size: 32px;

    @include themify() {
      color: themed("text_color2");
    }
  }

  .van-cell {
    padding-left: 8px;

    @include themify() {
      background: themed("main_background");
    }
  }

  .van-index-bar__sidebar {
    display: none;
    color: #7CBFFF;

    span {
      margin-bottom: 4px;
      font-size: 26px;
    }
  }
}
}
</style>
